<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="设备管理" />
        <el-divider class="mt-0" /> -->

        <el-row class="mb-3" :gutter="20">
            <el-col :span="3">
                <el-card style="height: calc(95vh - 135px)">
                    <div class="head-container">
                        <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search"
                            style="margin-bottom: 20px" />
                    </div>
                    <div class="head-container" style="height: calc(100vh - (85px + 40px + 30px));overflow-y: auto">
                        <el-tree :data="deptOptions"
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                            :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef"
                            node-key="deptId" :default-expanded-keys="defaultexpandedkeys" highlight-current
                            @node-click="handleNodeClick" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="11">
                <el-card style="height: calc(95vh - 135px)">
                    <!--查询条件-->
                    <!-- <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="auto">
                    <el-form-item label="设备名称" prop="roomname">
                        <el-input v-model="queryParams.roomname" clearable @clear="getDeviceLists"
                        @keyup.enter.native="getDeviceLists" />
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-select v-model="queryParams.roomtypeId" clearable style="width: 12.5rem" @change="getDeviceLists">
                            <el-option v-for="item in PassageList" :key="item.roomtypeId" :label="item.name"
                                :value="item.roomtypeId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getDeviceLists">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form> -->

                    <el-space class="mb-3">
                        <el-button type="primary" plain icon="Plus" @click="AddEditDeviceRef.showAddDrawer(deptIds)">
                            新增
                        </el-button>
                    </el-space>
                    <el-table ref="DeviceTableRef" v-loading="loading" :data="DeviceTables" highlight-current-row
                        @row-click="getPassageTable" border stripe
                        :row-style="tableRowStyle">
                        <el-table-column label="设备名称" prop="servername" />
                        <!-- <el-table-column label="id" prop="monitorserverId" v-if="tableColVisiableData.monitorserverId" /> -->
                        <el-table-column label="设备IP" prop="serverip" />
                        <el-table-column label="用户名" prop="serveruser" width="80">
                        </el-table-column>
                        <!-- <el-table-column label="密码" prop="serverpsw" /> -->
                        <!-- <el-table-column label="平台" prop="domainid" width="80" /> -->
                        <el-table-column label="设备类别" prop="type" width="80">
                            <template #default="scope">
                                <dict-tag :options="nj_device_type" :value="scope.row.type" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-tooltip content="新增通道" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="Plus"
                                        @click="AddEditPassageRef.showAddDrawer(scope.row)"></el-button>
                                </el-tooltip>

                                <el-tooltip content="编辑" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="Edit"
                                        @click="AddEditDeviceRef.showEditDrawer(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="Delete"
                                        @click="deleteDevices(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="详情" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="View"
                                        @click="handleAuthUser(scope.row)"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column fixed="right" label="操作" width="140" align="center">
                        <template #default="scope">
                            <el-button link size="small" type="primary"
                                @click="AddEditPassageRef.showAddDrawer(scope.row)">
                                <el-icon class="me-1">
                                    <Edit />
                                </el-icon>
                                新增通道
                            </el-button>
                            <el-button link size="small" type="primary"
                                @click="AddEditDeviceRef.showEditDrawer(scope.row)">
                                <el-icon class="me-1">
                                    <Edit />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-button link size="small" type="danger" @click="deleteDevices(scope.row)">
                                <el-icon class="me-1">
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                        </template>
                    </el-table-column> -->
                    </el-table>
                    <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize"
                        :total="total" @pagination="getDeviceLists" />
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card style="height: calc(95vh - 135px)">
                    <el-space class="mb-3">
                        <el-alert title="通道列表" type="info" :closable="false">
                        </el-alert>
                    </el-space>

                    <el-table ref="PassageTableRef" v-loading="ploading" :data="PassageTables" highlight-current-row
                    stripe
            :row-style="tableRowStyle">
                        <!-- <el-table-column label="所属设备" prop="monitorserverId" /> -->
                        <el-table-column label="通道名称" prop="channelname" />
                        <el-table-column label="设备ID" prop="channelcode" />

                        <el-table-column label="画质" prop="imglevel" width="80" filter-placement="bottom-end"
                            align="center">
                            <template #default="scope">
                                <dict-tag :options="nj_monitor_quantity" :value="scope.row.imglevel" />
                            </template>
                        </el-table-column>
                        <el-table-column label="是否女监" prop="iswoman" width="80" filter-placement="bottom-end"
                            align="center">
                            <template #default="scope">
                                <dict-tag :options="sys_normal_disable" :value="scope.row.iswoman" />
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="state" width="60" filter-placement="bottom-end"
                            align="center">
                            <template #default="scope">
                                <dict-tag :options="sys_normal_disable" :value="scope.row.state" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-tooltip content="编辑" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="Edit"
                                        @click="AddEditPassageRef.showEditDrawer(scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                                    <el-button link type="primary" icon="Delete"
                                        @click="deletePassages(scope.row)"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column fixed="right" label="操作" width="140" align="center">
                            <template #default="scope">
                                <el-button link size="small" type="primary"
                                    @click="AddEditPassageRef.showEditDrawer(scope.row)">
                                    <el-icon class="me-1">
                                        <Edit />
                                    </el-icon>
                                    编辑
                                </el-button>
                                <el-button link size="small" type="danger" @click="deleteDevices(scope.row)">
                                    <el-icon class="me-1">
                                        <Delete />
                                    </el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize"
                        :total="ptotal" @pagination="getPassageLists" />
                </el-card>
            </el-col>
        </el-row>

        <AddEditDevice ref="AddEditDeviceRef" @getDeviceList="getDeviceLists" />
        <AddEditPassage ref="AddEditPassageRef" @getPassageList="getPassageLists" />
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { getCurrentInstance } from "vue";
import PageHeader from "@/components/PageHeader/index.vue";
import AddEditDevice from "./AddEditDevice/AddEditDevice.vue";
import AddEditPassage from "./AddEditPassage/AddEditPassage.vue";

import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";
import { getDeviceList, deleteDevice, getPassageList, deletePassage } from "@/api/ParameterSetting/Device";
import PageEnum from "@/enum/PageEnum.js";


const { proxy } = getCurrentInstance();
const { sys_normal_disable, nj_device_type, nj_monitor_quantity } = proxy.useDict('sys_normal_disable', 'nj_device_type', 'nj_monitor_quantity')


const queryParamsRef = ref()
const DeviceTableRef = ref()
const PassageTableRef = ref()
const deleteStatus = ref(true)
const AddEditDeviceRef = ref({})
const AddEditPassageRef = ref({})

const unitId = ref()
const deptList = ref([])

const defaultexpandedkeys = ref([])

const treeloading = ref(true);
const isExpandAll = ref(true);

const loading = ref(false)
const ploading = ref(false)
const total = ref(0)
const ptotal = ref(0)
const DeviceTables = ref([])
const PassageTables = ref([
    {
        state: 1
    }
])

// // 设备列表
// const PassageList = ref([]);

const queryParams = ref({})
const paging = ref({
    pageNum: 1,// 页码    
    pageSize: PageEnum.SIZE// 分页数量
})


// 通道
const PqueryParams = ref({})

// // 列出表格中的每一列，默认都展示
// const tableColVisiableData = reactive({
//     "monitorserverId": false,
// })

onMounted(() => {
    getDeviceLists();
    getDeptTree();
    getPassageLists()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取设备列表
const getDeviceLists = async () => {
    //获取个人信息//找当前登录用户所在部门 
    await getUserProfile().then(res => {
        if (queryParams.value.unitId === undefined) {
            queryParams.value.unitId = res.data.unitId;
        }
        // unitId.value = queryParams.value.unitId !== res.data.unitId ? res.data.unitId : queryParams.value.unitId;
        // queryParams.value.unitId = unitId.value
        // console.log(unitId.value)
    })

    loading.value = true
    await getDeviceList(queryParams.value, paging.value).then(res => {

        DeviceTables.value = res.rows
        total.value = res.total
        loading.value = false
    })
}

// 获取通道列表
const getPassageLists = async () => {
    if (PqueryParams.value.monitorserverId === undefined) {
        PqueryParams.value.monitorserverId = '0'
    }
    ploading.value = true
    await getPassageList(PqueryParams.value, paging.value).then(res => {
        PassageTables.value = res.rows
        ptotal.value = res.total
        ploading.value = false
    })
}

// 点击设备--获取通道列表
const getPassageTable = async (row) => {
    PqueryParams.value.monitorserverId = row.monitorserverId
    getPassageLists()
}


// 删除设备
const deleteDevices = async (row) => {
    ElMessageBox.confirm('确定删除此设备？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteDevice(row.monitorserverId).then(res => {
            getDeviceLists()
        })
    }).catch(() => {
    });
}

// 删除通道
const deletePassages = async (row) => {
    ElMessageBox.confirm('确定删除此通道？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deletePassage(row.monitorchannelsId).then(res => {
            getPassageLists()
        })
    }).catch(() => {
    });
}

// // 重置搜索调解
// const handleRest = (formEl) => {
//     queryParams.value = {
//         servername: undefined,        
//     }
//     getDeviceLists()
//     getPassageLists()
// }

const deptIds = ref("");
const deptName = ref("");
const deptOptions = ref(undefined);
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
    if (!value) return true;
    return data.deptName.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
    proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
    listDept().then(response => {
        deptOptions.value = response.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
        defaultexpandedkeys.value = []
        defaultexpandedkeys.value = deptOptions.value.map(item => item.deptId);
    });
};
/** 节点单击事件 */
function handleNodeClick(data) {
    queryParams.value.unitId = data.deptId;
    deptIds.value = data.deptId;
    PqueryParams.value.monitorserverId = undefined
    getDeviceLists();
    getPassageLists();
};

</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>